<!--

                   _ooOoo_
                  o8888888o
                  88" . "88
                  (| -_- |)
                  O\  =  /O
               ____/`---'\____
             .'  \\|     |//  `.
            /  \\|||  :  |||//  \
           /  _||||| -:- |||||-  \
           |   | \\\  -  /// |   |
           | \_|  ''\---/''  |   |
           \  .-\__  `-`  ___/-. /
         ___`. .'  /--.--\  `. . __
      ."" '<  `.___\_<|>_/___.'  >'"".
     | | :  `- \`.;`\ _ /`;.`/ - ` : | |
     \  \ `-.   \_ __\ /__ _/   .-` /  /
======`-.____`-.___\_____/___.-`____.-'======
                   `=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         佛祖保佑       永无BUG
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  author: tangcheng_cd
  create by: 2019/8/26
  descr: 此组件使用一个下拉列表加上列表组合方式
-->
<template>
    <div class="v-select-show-list">
        <template v-if="selectPostition === 'top'">
            <el-select :value="null" :placeholder="placeholder"  @change="selectChange">
                <el-option
                    v-for="option in excludeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value">
                </el-option>
            </el-select>
        </template>
        <div class="show-list">
            <template v-for="item in listValueItems">
                <div class="list-item" :key="item.value">
                    <span @click="removeItem(item)" class="list-item-btn iconfont icon-close"></span>
                    <span>{{item.label}}</span>
                </div>
            </template>
        </div>
        <template v-if="selectPostition === 'bottom'">
            <el-select :value="null" :placeholder="placeholder" @change="selectChange">
                <el-option
                    v-for="option in excludeOptions"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value">
                </el-option>
            </el-select>
        </template>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-select-show-list',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: Array,
                default () {
                    return []
                }
            },
            // 选择框选项
            options: {
                type: Array,
                default () {
                    return []
                }
            },
            // 选择框的位置
            selectPostition: { // top bottom
                default: 'bottom'
            },
            // 选择框提示符
            placeholder: {
                type: String,
                default: '请选择'
            },
            // 排除已经选择的选项
            execludeSelect: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                list: []
            }
        },
        watch: {
            value (newValue, oldValue) {
                // debugger
                // this.list = newValue
                this.$set(this, 'list', newValue)
            }
        },
        computed: {
            excludeOptions () {
                let resultOptions = []
                if (this.execludeSelect) {
                    for (let option of this.options) {
                        if (this.list.indexOf(option.value) === -1) {
                            resultOptions.push(option)
                        }
                    }
                } else {
                    resultOptions = this.options
                }
                return resultOptions
            },
            listValueItems () {
                let ret = []
                for (let listItem of this.list) {
                    let option = this.options.find(option => {
                        return option.value === listItem
                    })
                    if (option !== null && option !== undefined) {
                        ret.push(option)
                    }
                }
                return ret
            }
        },
        methods: {
            removeItem (item) {
                for (let i = 0; i < this.list.length; i++) {
                    if (this.list[i] === item.value) {
                        this.list.splice(i, 1)
                        this.$emit('change', this.list)
                        break
                    }
                }
            },
            selectChange (value) {
                this.list.push(value)
                this.$emit('change', this.list)
            },
            getDataObjectList () {
                let ret = []
                for (let listItem of this.list) {
                    let option = this.options.find(option => {
                        return option.value === listItem
                    })
                    if (option !== null) {
                        ret.push(option)
                    }
                }
                return ret
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.v-select-show-list
    .el-select
        width 100%
    .show-list
        .list-item
            padding 2px
            font-size 10px
            background-color white
            border 1px solid rgb(220, 223, 230)
            &:hover
                background-color #f5f7fa
            .list-item-btn
                cursor pointer
</style>
